<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        ul {
            width: 550px;
        }
        .item {
            list-style: none;
            width: 160px;
            height: 120px;
            background: #ccc;
            float: left;
            margin: 10px;
        }
        .start {
            list-style: none;
            width: 160px;
            height: 120px;
            background: dodgerblue;
            font: 36px/120px "Microsoft YaHei";
            color: blue;
            text-align: center;
            float: left;
            margin: 10px;
            cursor: pointer;
        }
        .item-box {
            width: 100%;
            height: 100%;
            background: transparent;
            transition: ease .2s;
        }
        .item.blue .item-box {
            background: blue;
        }
    </style>
</head>
<body>

    <ul>
        <li class="item"><div class="item-box">沙发</div></li>
        <li class="item"><div class="item-box">iPhone8 PLUS</div></li>
        <li class="item"><div class="item-box">白葡萄酒</div></li>
        <li class="item"><div class="item-box">888元现金红包</div></li>
        <li class="start" id="btn">START</li>
        <li class="item"><div class="item-box">数据线</div></li>
        <li class="item"><div class="item-box">10积分</div></li>
        <li class="item"><div class="item-box">30元话费</div></li>
        <li class="item"><div class="item-box">3w欢乐豆</div></li>
    </ul>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btn").on("click", function() {
            $.get("http://www.shuangstar.xyz/index.php").done(function(res) {
                setTimeout(animate, 100, 24 + +res.id, 0, res.name);
                // console.debug(res);
            });
        });

        function animate(count, num, gift) {
            $(".item").removeClass("blue");
            $(".item").eq(num % 8).addClass("blue");
            if(count > 1) {
                setTimeout(animate, 400, count - 1, num + 1, gift);
            } else {
                setTimeout(alert, 400, "恭喜您！获得"+gift)
            }
        }
        
        // var p = new Promise(function(reslove, reject) {
        //     reslove(0);
        // });
        // function animate(count) {
        //     while(count--) {
        //         p = p.then(function(val) {
        //             $(".item").removeClass("blue");
        //             $(".item").eq(val % 8).addClass("blue");
        //             return val + 1;
        //         });
        //     }
        // }
        
    </script>
</body>
</html>